<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:q="http://huliqing.name/qfaces"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/example/_template.xhtml">
    <ui:define name="title">validator</ui:define>
    <ui:define name="header">validator组件示例</ui:define>
    <ui:define name="content">
        <div> debug： </div>
        <h:form>
            <h:panelGrid columns="2" border="1" cellspacing="1" cellpadding="20">
                <h:outputText value="姓名" />
                <h:panelGroup>
                    <h:inputText id="name" value="#{validatorBean.name}" />
                    <q:validator id="v1"
                                 for="name"
                                 message="请输入你的姓名，必须填写的."
                                 required="true"
                                 event="interval"
                                 />
                </h:panelGroup>

                <h:outputText value="年龄" />
                <h:panelGroup>
                    <h:inputText id="age" value="#{validatorBean.age}" />
                    <q:validator id="v2"
                                 for="age"
                                 message="请输入您的年龄，只能填18-60。"
                                 type="integer"
                                 min="18"
                                 max="60"
                                 messageCorrect="正确"
                                 displayFlag="false"
                                 event="interval"
                                 />
                </h:panelGroup>

                <h:outputText value="电子邮件" />
                <h:panelGroup>
                    <h:inputText id="email" value="#{validatorBean.email}" />
                    <q:validator for="email"
                                 message="请输入你的电子邮件地址,合法的电子邮件像这样：huliqing@live.com"
                                 regex="^[a-z0-9_]+\.?[a-z0-9_]+@[a-z0-9_]+\.[a-z]{2,4}$"
                                 messageCorrect="填写正确"
                                 messageError="填写错误哦!"
                                 styleClassTargetError="borderRed"
                                 event="interval"
                                 />
                </h:panelGroup>

                <h:outputText value="密码1" />
                <h:panelGroup>
                    <h:inputText id="password1" />
                    <q:validator for="password1"
                                 message="填写密码,不多于10个字符"
                                 maxLength="10"
                                 event="interval"
                                 />
                </h:panelGroup>

                <h:outputText value="密码2" />
                <h:panelGroup>
                    <h:inputText id="password2" />
                    <q:validator for="password2"
                                 equalId="password1"
                                 message="请确认您的密码，必须与密码1填写相同哦"
                                 event="interval" />
                </h:panelGroup>

                <h:outputText value="Ajax验证" />
                <h:panelGroup>
                    <h:inputText id="input1" />
                    <q:validator for="input1"
                                 message="Ajax的验证方式,请输入：Hello QFaces"
                                 listener="#{validatorBean.validateListener}"
                                 />
                </h:panelGroup>
            </h:panelGrid>


            <p /><h:commandButton value="提交" action="#{validatorBean.submit}" /><p />

            <div>
				输出：
                <h:panelGrid columns="2" border="1" cellspacing="3" cellpadding="3">
                    <h:outputText value="姓名" />
                    <h:outputText value="#{validatorBean.name}" />
                </h:panelGrid>
            </div>
        </h:form>
    </ui:define>


    <ui:define name="description" >
		这是一个验证组件，它可以帮助你轻松快速的实现更人性化，更友好的验证，
		组件能够同时实现前台与后台验证，并且验证逻辑是一样的。
		只要简单指定几个组件参数就可以实现相当友好的验证。组件可以支持简单验证，
		也可支持正则表达式验证，甚至可以支持更高级的自定义验证，只要绑定listener属性，
		就可以实现ajax的完全自定义验证。在大多数情况下，你都不需要自己编写后台验证代码。
    </ui:define>
    <ui:define name="htmlCode" >
        <h:outputText value="#{validatorBean.htmlCode}" />
    </ui:define>
    <ui:define name="javaCode" >
        <h:outputText value="#{validatorBean.javaCode}" />
    </ui:define>
</ui:composition>
